<!--动态组件-->
<template>
    <div style="display: flex;">
        <div
         :class="['item', active == index ? 'item-choosed' : '']"
          v-for="(item,index) in data"
           :key="item.name"
           @click="switchCom(item, index)"
           >
            {{ item.name }}
        </div>
    </div>

    <component :is="comId"></component>
</template>

<script setup lang='ts'>
import { ref, markRaw, shallowRef } from 'vue'

import A from './A.vue'
import B from './B.vue'
import C from './C.vue'

let active = ref(0)

let comId = shallowRef(A)  // 与ref(A) 比，shallowRef只做了浅层代理，A组件中的子属性并没有被proxy代理

// markRaw() 回给里面的值添加一个__skip__标识，防止组件内部被改成reactive响应式的对象。一般配合shallowRef使用。
let data = [
    {
        name: 'A组件',
        comId: markRaw(A)
    },
    {
        name: 'B组件',
        comId: markRaw(B)
    },
    {
        name: 'C组件',
        comId: markRaw(C)
    }
]

const switchCom = (item:any, index:number) => {
    comId.value = item.comId
    active.value = index
}

</script>
<style scoped>
.item {
    width: 50px;
    background-color: antiquewhite;
    text-align: center;
    color: black;
    border: 1px solid black;
    margin-left: 10px;
    cursor: pointer;
}

.item-choosed {
    background-color: aqua;
}
</style>